$(window).load(function () {
    $(".loading").fadeOut()
})

//调用Echarts;
$(function () {
    echarts_1();
    echarts_2();
    echarts_3();
    echarts_4();
    echarts_5();
    zb1();
    zb2();
    zb3();


//当前销售金额模块；
    function showtotal() {
        $.ajax({
            type: "post",
            async: false,
            url: "../api/api.php?act=summary&token=3cab7ce4142608c0f40c785b5ab5ca24",
            data: {},
            dataType: "json",
            success: function (result) {
                $('.cnum').text(result.data.totaldata);
            },
            error: function (errmsg) {
                $('.cnum').text("Ajax err！" + errmsg);
            }
        });
    }

    //自动刷新;
    var interval;
    showtotal();
    clearInterval(interval);
    interval = setInterval(function () {
        showtotal()
    }, 6 * 1000);


//公司完成率模块;
    function getMarquee() {
        var wtboy='';
        $.ajax({
            type: "post",
            async: false,
            url: "../api/api.php?act=marquee&token=3cab7ce4142608c0f40c785b5ab5ca24",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result.data) {
                    for (var i = 0; i < 10; i++) {
                        wtboy += "<li><p><span>"
                            + result.data[i].vname
                            + "</span><span>"
                            + result.data[i].vdata
                            + "</span><span>"
                            + result.data[i].vtask
                            + "</span><span>"
                            + result.data[i].totalrate
                            + "% </span></p></li>"
                    }
                    $('#wtbody').html(wtboy);
                }
            },
            error: function (errmsg) {
                $('.wrap').text(errmsg);
            }
        });
    }

    getMarquee();

//任务排行榜模块;
    function getsalesboy() {
        var salesboy;
        $.ajax({
            type: "post",
            async: false,
            url: "../api/api.php?act=task&token=3cab7ce4142608c0f40c785b5ab5ca24",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result.data) {
                    for (var i = 0; i < 5; i++) {
                        salesboy += "<tr><td><span>"
                            + [i + 1]
                            + "</span></td><td>"
                            + result.data[i].vname
                            + "</td><td>"
                            + result.data[i].vdata
                            + "</td><td>"
                            + result.data[i].vtask
                            + "</td><td>"
                            + result.data[i].totalrate
                            + "%</td></tr>"
                    }
                    $('#sales').html(salesboy);
                }
            },
            error: function (errmsg) {
                $('#sales').text('error' + errmsg);
            }
        });
    }

    getsalesboy();


//利润排行榜模块;
    function getPofit() {
        var profitboy;
        $.ajax({
            type: "post",
            async: false,
            url: "../api/api.php?act=profit&token=3cab7ce4142608c0f40c785b5ab5ca24",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result.data) {
                    for (var i = 0; i < 5; i++) {
                        profitboy += "<tr><td><span>"
                            + [i + 1]
                            + "</span></td><td>"
                            + result.data[i].vname
                            + "</td><td>"
                            + result.data[i].vdata
                            + "</td><td>"
                            + result.data[i].vtask
                            + "</td><td>"
                            + result.data[i].totalrate
                            + "%</td></tr>"
                    }
                    $('#profit').html(profitboy);
                }
            },
            error: function (errmsg) {
                $('#profit').text('error' + errmsg);
            }
        });
    }

    getPofit();

//人均占比分布模块;
    function echarts_1() {
        var vname = [], datajson = [];

        function getpie() {
            $.ajax({
                type: "post",
                async: false,
                url: "../api/api.php?act=demo&token=3cab7ce4142608c0f40c785b5ab5ca24",
                data: {},
                dataType: "json",
                success: function (result) {

                    if (result.data) {
                        for (var i = 0; i < result.data.length; i++) {
                            vname.push(result.data[i].vname);
                            datajson.push({value: result.data[i].vdata, name: result.data[i].vname}
                            );

                            //shift方法控制显示数量;
                            if (vname.length > 7) {
                                vname.shift();
                                datajson.shift();
                            }
                        }
                    }
                },
                error: function (errmsg) {
                    alert("Ajax获取服务器数据出错了！" + errmsg);
                }
            });
            return vname, datajson;
        }

        getpie();

        var myChart = echarts.init(document.getElementById('echart1'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                right: 0,
                top: 30,
                height: 160,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 12
                },
                orient: 'vertical',
                data: vname
            },
            calculable: true,
            series: [
                {
                    name: ' ',
                    color: ['#FF0033', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
                    type: 'pie',
                    radius: [30, 70],
                    center: ['35%', '50%'],
                    roseType: 'radius',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    lableLine: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: datajson
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

//最佳销售分布模块;
    function echarts_2() {
        var bestName = [], bestData = [];

        function getBest() {
            $.ajax({
                type: "post",
                async: false,
                url: "../api/api.php?act=task&token=3cab7ce4142608c0f40c785b5ab5ca24",
                data: {},
                dataType: "json",
                success: function (result) {

                    if (result.data) {
                        for (var i = 0; i < result.data.length; i++) {
                            bestName.push(result.data[i].vname);
                            bestData.push({value: result.data[i].vdata, name: result.data[i].vname}
                            );

                            //shift方法控制显示数量;
                            if (bestName.length > 5) {
                                bestName.shift();
                                bestData.shift();
                            }
                        }
                    }
                },
                error: function (errmsg) {
                    alert("Ajax获取服务器数据出错了！" + errmsg);
                }
            });
            return bestName, bestData;
        }

        getBest();

        var myChart = echarts.init(document.getElementById('echart2'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                bottom: '0',
                data: bestName,
                icon: 'circle',
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                }
            },
            calculable: true,
            series: [{
                name: '',
                color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#c96262'],
                type: 'pie',
                //起始角度，支持范围[0, 360]
                startAngle: 0,
                //饼图的半径，数组的第一项是内半径，第二项是外半径
                radius: [51, 100],
                //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                center: ['50%', '45%'],

                //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 面积展现数据的百分比，半径展现数据的大小。
                //  'area' 所有扇区面积相同，仅通过半径展现数据大小
                roseType: 'area',
                //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        //  formatter: '{c}辆'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length2: 1,
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: bestData
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

//销售VS任务模块;
    function echarts_3() {
        var myChart = echarts.init(document.getElementById('echart3'));
        var linename = [], linedata = [], linetask = [];

        function getline() {
            $.ajax({
                type: "post",
                async: false,
                url: "../api/api.php?act=bar&token=3cab7ce4142608c0f40c785b5ab5ca24",
                data: {},
                dataType: "json",
                success: function (result) {
                    if (result.data) {
                        for (var i = 0; i < result.data.length; i++) {
                            linename.push(result.data[i].vname);
                            linedata.push(result.data[i].vdata);
                            linetask.push(result.data[i].vtask);
                        }

                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    lineStyle: {
                                        color: '#57617B'
                                    }
                                }
                            },
                            legend: {
                                //icon: 'vertical',
                                data: ['销售额', '销售任务'],
                                //align: 'center',
                                // right: '35%',
                                top: '0',
                                textStyle: {
                                    color: "#fff"
                                },
                                // itemWidth: 15,
                                // itemHeight: 15,
                                itemGap: 20,
                            },
                            grid: {
                                left: '0',
                                right: '20',
                                top: '10',
                                bottom: '20',
                                containLabel: true
                            },
                            xAxis: [{
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: 'rgba(255,255,255,.6)'
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(255,255,255,.1)'
                                    }
                                },
                                data: linename
                            }, {}],
                            yAxis: [{
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: 'rgba(255,255,255,.6)'
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(255,255,255,.1)'
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: 'rgba(255,255,255,.1)'
                                    }
                                }
                            }],
                            series: [{
                                name: '销售额',
                                type: 'line',
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 5,
                                showSymbol: false,
                                lineStyle: {
                                    normal: {
                                        width: 2
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(24, 163, 64, 0.3)'
                                        }, {
                                            offset: 0.8,
                                            color: 'rgba(24, 163, 64, 0)'
                                        }], false),
                                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                                        shadowBlur: 10
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#cdba00',
                                        borderColor: 'rgba(137,189,2,0.27)',
                                        borderWidth: 12
                                    }
                                },
                                data: linedata
                            }, {
                                name: '销售任务',
                                type: 'line',
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 5,
                                showSymbol: false,
                                lineStyle: {
                                    normal: {
                                        width: 2
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(39, 122,206, 0.3)'
                                        }, {
                                            offset: 0.8,
                                            color: 'rgba(39, 122,206, 0)'
                                        }], false),
                                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                                        shadowBlur: 10
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#277ace',
                                        borderColor: 'rgba(0,136,212,0.2)',
                                        borderWidth: 12
                                    }
                                },
                                data: linetask
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });

                    }

                },
                error: function (errmsg) {
                    alert("Ajax获取服务器数据出错了！" + errmsg);
                }
            });
            //return linename, linedata, linetask;
        }

        getline();
    }

//月度任务进程模块;
    function echarts_4() {
        var myChart = echarts.init(document.getElementById('echart4'));
        var barname = [], bardata = [], bartask = [], barrate = [];

        function getbar() {
            $.ajax({
                type: "post",
                async: false,
                url: "../api/api.php?act=bar&token=3cab7ce4142608c0f40c785b5ab5ca24",
                data: {},
                dataType: "json",
                success: function (result) {
                    if (result.data) {
                        for (var i = 0; i < result.data.length; i++) {
                            barname.push(result.data[i].vname);
                            bardata.push(result.data[i].vdata);
                            bartask.push(result.data[i].vtask);
                            barrate.push(result.data[i].totalrate);

                            //shift方法控制显示数量;
                            if (barname.length > 10) {
                                barname.shift();
                                bardata.shift();
                                bartask.shift();
                                barrate.shift();
                            }
                        }

                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    lineStyle: {
                                        color: '#57617B'
                                    }
                                }
                            },
                            "legend": {

                                "data": [
                                    {"name": "实际完成"},
                                    {"name": "销售任务"},
                                    {"name": "完成率"}
                                ],
                                "top": "0%",
                                "textStyle": {
                                    "color": "rgba(255,255,255,0.9)"//图例文字
                                }
                            },

                            "xAxis": [
                                {
                                    "type": "category",
                                    data: barname,
                                    axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                                    axisLabel: {
                                        textStyle: {color: "rgba(255,255,255,.6)", fontSize: '14',},
                                    },

                                },
                            ],
                            "yAxis": [
                                {
                                    "type": "value",
                                    "name": "金额",
                                    "min": 0,
                                    "max": 200,
                                    "interval": 30,
                                    "axisLabel": {
                                        "show": true,

                                    },
                                    axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},//左线色

                                },
                                {
                                    "type": "value",
                                    "name": "完成率",
                                    "show": true,
                                    "axisLabel": {
                                        "show": true,

                                    },
                                    axisLine: {lineStyle: {color: 'rgba(255,255,255,.4)'}},//右线色
                                    splitLine: {show: true, lineStyle: {color: "#001e94"}},//x轴线
                                },
                            ],
                            "grid": {
                                "top": "10%",
                                "right": "30",
                                "bottom": "30",
                                "left": "30",
                            },
                            "series": [
                                {
                                    "name": "实际完成",
                                    "type": "bar",
                                    "data": bardata,
                                    "barWidth": "auto",
                                    "itemStyle": {
                                        "normal": {
                                            "color": {
                                                "type": "linear",
                                                "x": 0,
                                                "y": 0,
                                                "x2": 0,
                                                "y2": 1,
                                                "colorStops": [
                                                    {
                                                        "offset": 0,
                                                        "color": "#609db8"
                                                    },

                                                    {
                                                        "offset": 1,
                                                        "color": "#609db8"
                                                    }
                                                ],
                                                "globalCoord": false
                                            }
                                        }
                                    }
                                },
                                {
                                    "name": "销售任务",
                                    "type": "bar",
                                    "data": bartask,
                                    "barWidth": "auto",
                                    "itemStyle": {
                                        "normal": {
                                            "color": {
                                                "type": "linear",
                                                "x": 0,
                                                "y": 0,
                                                "x2": 0,
                                                "y2": 1,
                                                "colorStops": [
                                                    {
                                                        "offset": 0,
                                                        "color": "#66b8a7"
                                                    },
                                                    {
                                                        "offset": 1,
                                                        "color": "#66b8a7"
                                                    }
                                                ],
                                                "globalCoord": false
                                            }
                                        }
                                    },
                                    "barGap": "0"
                                },
                                {
                                    "name": "完成率",
                                    "type": "line",
                                    "yAxisIndex": 1,

                                    "data": barrate,
                                    lineStyle: {
                                        normal: {
                                            width: 2
                                        },
                                    },
                                    "itemStyle": {
                                        "normal": {
                                            "color": "#cdba00",

                                        }
                                    },
                                    "smooth": true
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });

                    }
                },
                error: function (errmsg) {
                    alert("Ajax获取服务器数据出错了！" + errmsg);
                    myChart.hideLoading();
                }
            });

            return barname, bardata, bartask, barrate;
        }

        /*        var barinterval;*/
        // 执行异步请求
        getbar();
        /*        clearInterval(barinterval);
         //自动刷新;
         barinterval = setInterval(function () {
         getbar()
         }, 6 * 1000);*/

    }

//完成率排行榜模块;
    function echarts_5() {
        var myChart = echarts.init(document.getElementById('echart5'));
        var char5name = [], char5ages = [], char5task = [], char5rate = [];

        function getsales() {
            $.ajax({
                type: "post",
                async: false,
                url: "../api/api.php?act=sales&token=3cab7ce4142608c0f40c785b5ab5ca24",
                data: {},
                dataType: "json",
                success: function (result) {
                    if (result.data) {
                        for (var i = 0; i < result.data.length; i++) {
                            char5name.push(result.data[i].vname);
                            char5ages.push(result.data[i].vdata);
                            char5task.push(result.data[i].vtask);
                            char5rate.push(result.data[i].totalrate);

                            //shift方法控制显示数量;
                            if (char5name.length > 11) {
                                char5name.shift();
                                char5ages.shift();
                                char5task.shift();
                                char5rate.shift();
                            }
                        }

                        // 颜色
                        var lightBlue = {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(41, 121, 255, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(0, 192, 255, 1)'
                            }],
                            globalCoord: false
                        }

                        var option = {
                            tooltip: {
                                show: false
                            },
                            grid: {
                                top: '0%',
                                left: '65',
                                right: '14%',
                                bottom: '0%',
                            },
                            xAxis: {
                                min: 0,
                                max: 100,
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    show: false
                                },
                                axisLabel: {
                                    show: false
                                }
                            },
                            yAxis: {
                                data: char5name,
                                //offset: 15,
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    show: false
                                },
                                axisLabel: {
                                    color: 'rgba(255,255,255,.6)',
                                    fontSize: 14
                                }
                            },
                            series: [{
                                type: 'bar',
                                label: {
                                    show: true,
                                    zlevel: 10000,
                                    position: 'right',
                                    padding: 10,
                                    color: '#49bcf7',
                                    fontSize: 14,
                                    formatter: '{c}%'

                                },
                                itemStyle: {
                                    color: '#49bcf7'
                                },
                                barWidth: '15',
                                data: char5rate,
                                z: 10
                            }, {
                                type: 'bar',
                                barGap: '-100%',
                                itemStyle: {
                                    color: '#fff',
                                    opacity: 0.1
                                },
                                barWidth: '15',
                                data: char5task,
                                z: 5
                            }],
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });

                    }
                },
                error: function (errmsg) {
                    alert("Ajax获取服务器数据出错了！" + errmsg);
                }
            });
            //return char5name, char5ages;
        }

        /*        var salesinterval;*/
        // 执行异步请求
        getsales();
        /*        clearInterval(salesinterval);
         //自动刷新;
         salesinterval = setInterval(function () {
         getsales()
         }, 6 * 1000);*/
    }

//男女比例占比模块;
    function zb1() {
        var myChart = echarts.init(document.getElementById('zb1'));
        var v1 = 298//男消费
        var v2 = 523//女消费
        var v3 = v1 + v2//总消费
        option = {
            series: [{
                type: 'pie',
                radius: ['60%', '70%'],
                color: '#49bcf7',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v1,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

//完成比例占比模块;
    function zb2() {
        var myChart = echarts.init(document.getElementById('zb2'));
        var pdata=[], ptask=[];

        $.ajax({
            type: "post",
            async: false,
            url: "../api/api.php?act=summary&token=3cab7ce4142608c0f40c785b5ab5ca24",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result.data) {
                    pdata.push(result.data.totaldata);
                    ptask.push(result.data.totaltask);
                }
            },
            error: function (errmsg) {
                // $('.cnum').text("Ajax err！" + errmsg);
            }
        });

        var v1 = pdata //已完成
        var v2 = ptask - pdata //未完成
        var v3 = ptask //总任务
        option = {
            animation: true,
            series: [{
                type: 'pie',
                radius: ['60%', '70%'],
                color: '#cdba00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '已完成',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v2,
                    name: '未完成',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v1 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }


//总任务比例占比模块;
    function zb3() {
        var myChart = echarts.init(document.getElementById('zb3'));
        var v1 = 164//男消费
        var v2 = 579//女消费
        var v3 = v1 + v2//总消费
        option = {
            series: [{

                type: 'pie',
                radius: ['60%', '70%'],
                color: '#62c98d',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v1,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
})
